/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-month-modal {
	height: 0;

	&__year {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: var(--pure-month-modal-year-gap, 30px);
		font-size: var(--pure-month-modal-year-font-size);
		font-weight: var(--pure-month-modal-year-font-weight, 500);
		color: var(--pure-month-modal-year-color);
		text-align: center;
		margin: var(--pure-month-modal-year-margin);
		padding: var(--pure-month-modal-year-padding, 10px);

		&__text {
			font-size: var(--pure-month-modal-year-text-font-size, var(--pure-month-modal-year-font-size));
			font-weight: var(--pure-month-modal-year-text-font-weight, var(--pure-month-modal-year-font-weight, 500));
			color: var(--pure-month-modal-year-text-color, var(--pure-month-modal-year-color));
			margin: var(--pure-month-modal-year-text-margin);
			padding: var(--pure-month-modal-year-text-padding);
		}

		&__icon {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			font-size: var(--pure-month-modal-year-icon-font-size, var(--pure-month-modal-year-font-size));
			font-weight: var(--pure-month-modal-year-icon-font-weight, var(--pure-month-modal-year-font-weight, 500));
			color: var(--pure-month-modal-year-icon-color, var(--pure-month-modal-year-color));
			margin: var(--pure-month-modal-year-icon-margin);
			padding: var(--pure-month-modal-year-icon-padding);

			&--disabled {
				pointer-events: none;
				color: var(--pure-month-modal-year-icon-disabled-color, var(--pure-text-color-light));
				opacity: var(--pure-month-modal-year-icon-disabled-opacity, var(--pure-opacity-disabled));
			}
		}
	}

	&__body {
		padding: var(--pure-month-modal-body-padding, 10px 0);
		margin: var(--pure-month-modal-body-margin);
		background: var(--pure-month-modal-body-background);
	}

	&__months {
		display: grid;
		grid-template-columns: repeat(var(--pure-month-modal-months-columns, 3), 1fr);
		gap: var(--pure-month-modal-months-gap, 10px);
		background: var(--pure-month-modal-months-background);
		border-radius: var(--pure-month-modal-months-border-radius, var(--pure-radius-default));
	}

	&__month {
		text-align: center;
		padding: var(--pure-month-modal-month-padding, 12px 0);
		border-radius: var(--pure-month-modal-month-border-radius, var(--pure-radius-default));
		transition: var(--pure-month-modal-month-transition, 200ms);
		font-size: var(--pure-month-modal-month-font-size);
		color: var(--pure-month-modal-month-color);
		font-weight: var(--pure-month-modal-month-font-weight);
		background: var(--pure-month-modal-month-background);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: baseline;

		&__text {
			width: var(--pure-month-modal-month-text-width);
			height: var(--pure-month-modal-month-text-height);
			background: var(--pure-month-modal-month-text-background);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		&--selected {
			background: var(--pure-month-modal-month-select-background, var(--pure-theme-primary));
			color: var(--pure-month-modal-month-select-color, var(--pure-text-color-invert));
			font-weight: var(--pure-month-modal-month-select-font-weight, var(--pure-month-modal-month-font-weight));
			font-size: var(--pure-month-modal-month-select-font-size, var(--pure-month-modal-month-font-size));

			.pure-month-modal__month__text {
				background: var(--pure-month-modal-month-select-text-background);
			}
		}

		&--disabled {
			background: var(--pure-month-modal-month-disabled-background, var(--pure-month-modal-month-background));
			color: var(--pure-month-modal-month-disabled-color, var(--pure-month-modal-month-color));
			font-weight: var(--pure-month-modal-month-disabled-font-weight, var(--pure-month-modal-month-font-weight));
			font-size: var(--pure-month-modal-month-disabled-font-size, var(--pure-month-modal-month-font-size));
			pointer-events: none;
			opacity: var(--pure-month-modal-month-disabled-opacity, var(--pure-opacity-disabled));

			.pure-month-modal__month__text {
				background: var(--pure-month-modal-month-disabled-text-background);
			}
		}
	}

	&--safe-area-bottom {
		.pure-month-modal__container {
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
	}
}
